<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/login-Manager.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div th:replace="fragments/header :: header"></div>
    <!-- 登录页面主体 -->
    <div class="login-container">
        <div class="login-content">
            <div class="login-header">
                <h2>用户登录</h2>
                <p>还没有账号？<a href="./register.html">立即注册</a></p>
            </div>
            <div class="login-form">
                <!-- 用户名/邮箱输入 -->
                <div class="form-group">
                    <label for="username">用户名/邮箱</label>
                    <div class="input-wrapper">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" name="username" required
                               placeholder="请输入用户名或邮箱">
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" required
                               placeholder="请输入密码">
                    </div>
                </div>

                <!-- 记住我和忘记密码 -->
                <div class="form-group login-options">
                    <label class="remember-me">
                        <input type="checkbox" name="remember" id="remember">
                        <span>记住我</span>
                    </label>
                    <a href="/forgot-password" class="forgot-password">忘记密码？</a>
                </div>

                <!-- 登录按钮 -->
                <button type="submit" id="loginBtn" class="login-btn">登录</button>

                <!-- 第三方登录 -->
                <div class="third-party-login">
                    <p>其他登录方式</p>
                    <div class="login-methods">
                        <a href="#" class="wechat"><i class="fab fa-weixin"></i></a>
                        <a href="#" class="qq"><i class="fab fa-qq"></i></a>
                        <a href="#" class="weibo"><i class="fab fa-weibo"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div th:replace="fragments/footer :: footer"></div>
    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 在其他脚本之后引入 -->
    <script src="./js/api.js"></script>
    <script>
        // 保存token到localStorage
        function saveToken(token) {
            localStorage.setItem('adminToken', token);
        }

        // 保存用户信息
        function saveUserInfo(userInfo) {
            localStorage.setItem('adminUserInfo', JSON.stringify(userInfo));
        }

        document.querySelector('#loginBtn').addEventListener('click', function () {
            // 获取用户名和密码
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;

            // 表单验证
            if (!username || !password) {
                layui.layer.msg('用户名和密码不能为空', {icon: 2});
                return;
            }

            // 显示加载中
            const loadingIndex = layui.layer.load(1, {
                shade: [0.1, '#fff']
            });

            // 使用axios直接发送登录请求
            axios.post('/users/login', {
                username: username,
                password: password
            })
            .then(response => {
                layui.layer.close(loadingIndex);
                
                if (response.data.success) {
                    // 登录成功
                    const userData = response.data.data;
                    
                    // 保存token和用户信息
                    if (userData.token) {
                        saveToken(userData.token);
                    }
                    saveUserInfo(userData);
                    
                    // 显示成功消息
                    layui.layer.msg('登录成功', {
                        icon: 1,
                        time: 1000
                    }, function() {
                        // 跳转到后台首页
                        window.location.href = './admin-Manager.html';
                    });
                } else {
                    // 登录失败
                    layui.layer.msg(response.data.message || '登录失败', {icon: 2});
                }
            })
            .catch(error => {
                layui.layer.close(loadingIndex);
                
                // 处理错误
                let errorMsg = '登录失败，请稍后再试';
                if (error.response && error.response.data) {
                    errorMsg = error.response.data.message || errorMsg;
                }
                layui.layer.msg(errorMsg, {icon: 2});
            });
        });

        // 回车键登录
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                document.querySelector('#loginBtn').click();
            }
        });

        // 检查是否已登录
        function checkLogin() {
            const token = localStorage.getItem('adminToken');
            if (token) {
                // 验证token有效性
                axios.get('/users/current', {
                    headers: {
                        'Authorization': 'Bearer ' + token
                    }
                })
                .then(response => {
                    if (response.data.code === 200) {
                        // token有效，直接跳转到后台首页
                        window.location.href = './admin-Manager.html';
                    }
                })
                .catch(() => {
                    // token无效，清除本地存储
                    localStorage.removeItem('adminToken');
                    localStorage.removeItem('adminUserInfo');
                });
            }
        }

        // 页面加载时检查登录状态
        checkLogin();
    </script>
</body>
</html>